import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Steps, Form, message, Button,  } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import constants from '../../../common/constants';
import GoodsCat from './GoodsCat';
import GoodsGI from './GoodsGI';
import GoodsSI from './GoodsSI';
import GoodsAttr from './GoodsAttr';
import GoodsOI from './GoodsOI';
import styles from './goodsManage.less';
import { routerRedux } from 'dva/router';
import {Link} from 'dva/router'

const userInfoState = sessionStorage.getItem("userInfoState");
const { Step } = Steps;
let goodsPhoto = [];
@connect(state => ({
    stepFormData: state.goodsManage.step,
    submitting: state.goodsManage.stepFormSubmitting,
}))
@Form.create()

export default class AddGoods extends PureComponent {
    state = {
        loading: false,
        returnShopId:'',
        parentReturnPath:''
    };

    componentWillMount() {
        const {dispatch,stepFormData} = this.props;
        const goods_id = stepFormData.goods_id;
        dispatch({
            type: 'goodsManage/queryGoodsPhoto',
            payload: {goods_id: goods_id},
            callback: (response) => {
                if (response.result === 0) {
                    goodsPhoto = [];
                    response.resultData.goodsPhotoList.map(function(k){
                        k.url=`${constants.imageUrlFix}${k.name}`;
                        goodsPhoto.push(k);
                    })

                }
            }
        });
    }

    getCurrentStep() {
        const { location } = this.props;
        const { pathname } = location;
        const pathList = pathname.split('/');
        switch (pathList[pathList.length - 1]) {
            case 'step-form': return 0;
            case 'goodsGI': return 1;
            case 'goodsSI': return 2;
            case 'goodsAttr':return 3;
            case 'goodsOI': return 4;
            default: return 0;
        }
    }

    getCurrentComponent() {
        const componentMap = {
            0: GoodsCat,
            1: GoodsGI,
            2: GoodsSI,
            3: GoodsAttr,
            4: GoodsOI
        };
        return componentMap[this.getCurrentStep()];
    }

    handleAddGoods = (editType,user_id,values,e) => {
        const {dispatch, stepFormData} = this.props;
        console.log({...stepFormData})
        dispatch({
            type: `goodsManage/${editType}`,
            payload: {
                ...stepFormData,
                ...values,
                user_id: user_id
            },
            callback: (response) => {
                if (response.result === 0) {
                    message.success('发布成功');
                    dispatch(routerRedux.push('/goods/goodsManage'));
                } else {
                    message.error('网络异常，请稍后再试');
                }
            }
        });
    }

    goodsCatSubmit = (editType,user_id,values,e) => {
        const {dispatch, stepFormData} = this.props;
        console.log({...stepFormData})
        dispatch({
            type: `goodsManage/modGoodsCat`,
            payload: {
                ...stepFormData,
                ...values,
                user_id: user_id
            },
            callback: (response) => {
                if (response.result === 0) {
                    message.success('修改成功');
                } else {
                    message.error('网络异常，请稍后再试');
                }
            }
        });
    }

    goodsGISubmit = (editType,user_id,values,e) => {
        const {dispatch, stepFormData} = this.props;
        dispatch({
            type: `goodsManage/modGoodsGI`,
            payload: {
                ...values,
                user_id: user_id,
                goods_id:stepFormData.goods_id
            },
            callback: (response) => {
                if (response.result === 0) {
                    message.success('修改成功');
                } else {
                    message.error('网络异常，请稍后再试');
                }
            }
        });
    }

    goodsSISubmit = (editType,user_id,values,e) => {
        const {dispatch, stepFormData} = this.props;
        dispatch({
            type: `goodsManage/modGoodsSI`,
            payload: {
                ...values,
                user_id: user_id,
                goods_id:stepFormData.goods_id
            },
            callback: (response) => {
                if (response.result === 0) {
                    message.success('修改成功');
                } else {
                    message.error('网络异常，请稍后再试');
                }
            }
        });
    }

    goodsAttrSubmit = (editType,user_id,values,e) => {
        const {dispatch, stepFormData} = this.props;
        dispatch({
            type: `goodsManage/modGoodsAttr`,
            payload: {
                ...values,
                user_id: user_id,
                goods_id:stepFormData.goods_id
            },
            callback: (response) => {
                if (response.result === 0) {
                    message.success('修改成功');
                } else {
                    message.error('网络异常，请稍后再试');
                }
            }
        });
    }

    render() {
        const { form, stepFormData, submitting, dispatch } = this.props;
        const {editType}=this.props.stepFormData
        const pageTitle=editType==='add'? '添加商品':'编辑商品';
        const returnPath=this.props.stepFormData.returnPath
        const returnShopId=this.props.stepFormData.returnShopId
        const parentReturnPath=this.props.stepFormData.parentReturnPath
        const formItemLayout = {
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 18,
            },
        };
        const CurrentComponent = this.getCurrentComponent();

        return (
            <PageHeaderLayout title= {pageTitle} >
                <Card bordered={false}>
                    <div>
                        <Button type="default"><Link to={{pathname:returnPath,state:returnShopId,returnPath:parentReturnPath}}>返回</Link></Button>
                    </div>
                    <div>
                        <Steps current={this.getCurrentStep()} className={styles.steps}>
                            <Step title="分类信息" />
                            <Step title="一般信息" />
                            <Step title="特殊信息" />
                            <Step title="属性信息" />
                            <Step title="其他信息" />
                        </Steps>
                        <CurrentComponent
                            formItemLayout={formItemLayout}
                            form={form}
                            dispatch={dispatch}
                            data={stepFormData}
                            submitting={submitting}
                            submit={this.handleAddGoods}
                            goodsPhoto={goodsPhoto}
                            goodsCatSubmit={this.goodsCatSubmit}
                            goodsGISubmit={this.goodsGISubmit}
                            goodsSISubmit={this.goodsSISubmit}
                            goodsAttrSubmit={this.goodsAttrSubmit}
                        />
                    </div>
                </Card>
            </PageHeaderLayout>
        );
    }
}
